<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片详情</title>
    <link rel="stylesheet" href="../css/imgDetail.css">
</head>
<body>
<div class="titleWrapper">
    <p class="title"></p>
    <p class="author"></p>
</div>

<div id="img">

</div>


<p class="text"><span class="textSpan"></span></p>

<div class="bar">
    <!--<p class="checkImg">查看大图 <img src="../images/imgDetail/confirm.png" alt=""></p>-->
    <p class="changePage">
        <img src="../images/imgDetail/last.png" alt="">
        <img src="../images/imgDetail/next.png" alt="">
        <span>翻页</span>
    </p>
    <p class="textShow">
        <img src="../images/imgDetail/up.png" alt="">
        <img src="../images/imgDetail/down.png" alt="">
        <span>隐藏或显示图片文字</span>
    </p>

    <p class="page"></p>

</div>

<script src="../js/yajax.js"></script>
<script src="../js/use.js"></script>
<script src="../js/S.js"></script>
<script src="../js/common.js"></script>
<script type="text/javascript">

    var clickFunction = function(keyEvent){
        keyEvent = keyEvent ? keyEvent : window.event;
        keyEvent.which = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
        keycontrol(keyEvent);
    };
    //window.document.onkeypress = clickFunction;
    window.document.onkeydown = clickFunction;
    //按键操作
    function keycontrol(obj) {
        if (obj.which == 0x0026) {
            /* 上 */
            keyopt.moveBtn("go_top");
        } else if (obj.which == 0x0028) {
            /* 下 */
            keyopt.moveBtn("go_bottom");
        } else if (obj.which == 0x0025) {
            /* 左 */
            keyopt.moveBtn("go_left");
        } else if (obj.which == 0x0027) {
            /* 右 */
            keyopt.moveBtn("go_right");
        } else if (obj.which == 0x000D) {
            /* 确定 */
            keyopt.marksure();
        } else if ((obj.which <= 0x0039 && obj.which >= 0x0030) || obj.which == 0x118 || obj.which == 280) {//数字键输入
            keyopt.input(obj.which);
        } else if (obj.which == 113 || obj.which == 0x0008) {// 返回
            obj.stopPropagation();
            obj.preventDefault();
            history.go(-1);
        }
    }

    //操作类型
    var keyopt = {
        options : {
            focusElm : "img"
        },
        moveBtn : function(toDirection) {
            // 移动之前的id
            var oldBtnId = this.options.focusElm;
            // 将移动之前的元素json信息解析成json对象
            var old_obj_json = eval(oldBtnId + "_json");
            // 获取移动目的地的id信息
            var goElm = old_obj_json[toDirection];
            if (goElm == "") {
                goElm = oldBtnId;
            }
            if(oldBtnId.indexOf('list')!=-1&&!document.getElementById(goElm)&&toDirection=='go_bottom'){
                goElm='last';
            }
            var new_btn = document.getElementById(goElm);
            if (new_btn) {
                var onfocusFuc = eval(goElm + "_onfocus");  //之后ID的blur方法
                var onblurFuc = eval(oldBtnId + "_onblur");  //之前ID的focus方法
                onblurFuc(toDirection, oldBtnId);//go_buttom,top1
                this.options.focusElm = goElm;
                onfocusFuc(toDirection, goElm);//go_buttom,top2
            }
        },
        marksure : function() {
            if(document.getElementById(this.options.focusElm)){
                var onsubmitFuc = eval(this.options.focusElm + "_onsubmit");
                onsubmitFuc('',this.options.focusElm);
            }
        },
        input : function(code) {
            var onkeypressFuc = eval(this.options.focusElm + "_onkeypress");
            onkeypressFuc(code);
        },
        moveToElm : function(id) {
            var to_elm = document.getElementById(id);
            if (to_elm) {
                var onfocusFuc = eval(id + "_onfocus");
                var onblurFuc = eval(this.options.focusElm + "_onblur");
                onfocusFuc();
                this.options.focusElm = id;
                onblurFuc();
            }
        },
        addClass : function(id, className) {
            document.getElementById(id).className += " " + className;
        },
        removeClass : function(id, className) {//top1,,,top
            document.getElementById(id).className = document.getElementById(id).className      //class="1"
                    .replace(className, '');
        },
        replaceClass : function(id, searchClass, replaceClass) {
            var className = document.getElementById(id).className;
            document.getElementById(id).className = className.replace(searchClass,
                    replaceClass)
        }
    };


    var id=use.GetQueryString('id');
    console.log(CONFIG);

    var pageIndex=0;
    var totalPage;
    var picArr;
    var introArr;
    var showStatus=0;
    function getDetail(){
        new YAjax().request({
            url: CONFIG.HTTP + CONFIG.VILLAGE_URLS[0].getgetWanYuanContentCulars + '&objId='+id+'&pageIndex=0&pageSize=1&loginToken=' + LOGIN_TOKEN,
            method: "GET",
            success: function (data) {
                var obj = JSON.parse(data);
                console.log(obj);
                picArr=obj.datas[0].pictures.split("∮");
                introArr=obj.datas[0].pictureintroduce.split("∮");
                totalPage=picArr.length;
                use.setSlide('slide',obj.datas[0].titleName,35,"title",0);
                use.setSlide('slide','作者：'+obj.datas[0].source,35,"author",0);
                if(introArr[0]==""){
                    document.getElementsByClassName("text")[0].style.display="none";
                }else{
                    use.setSlide('slide',introArr[0],30,"textSpan",0);
                }

                document.getElementById("img").style.background='url('+CONFIG.IMAGE_RESOURCES_ADDRESS+picArr[0]+') no-repeat center';
                document.getElementById("img").style.backgroundSize='100% 100%';
                document.getElementsByClassName("page")[0].innerHTML=(pageIndex+1)+'/'+totalPage;
            }
        })
    }
    getDetail();

    function changePage(status){
        if(status==0){ // 上一页
            if(pageIndex>0){
                pageIndex--;
            }

        }else{   // 下一页
            if(pageIndex+1<totalPage){
                pageIndex++;
            }
        }
        if(introArr[pageIndex]==""){
            document.getElementsByClassName("text")[0].style.display="none";
        }else{
            if(showStatus==1){
                document.getElementsByClassName("text")[0].style.display="none";
                document.getElementsByClassName("titleWrapper")[0].style.display="none";
            }else{
                document.getElementsByClassName("text")[0].style.display="block";
                document.getElementsByClassName("titleWrapper")[0].style.display="block";
            }
            use.setSlide('slide',introArr[pageIndex],30,"textSpan",0);
        }
        document.getElementById("img").style.background='url('+CONFIG.IMAGE_RESOURCES_ADDRESS+picArr[pageIndex]+') no-repeat center';
        document.getElementById("img").style.backgroundSize='100% 100%';
        document.getElementsByClassName("page")[0].innerHTML=(pageIndex+1)+'/'+totalPage;
    }



    var img_json={
        "go_left":"img",
        "go_top": "img",
        "go_right": "img",
        "go_bottom": "img"
    };
    var img_onfocus = function (code,id){

    };
    var img_onblur = function (code,id) {
        if(code=="go_top"){
            document.getElementsByClassName("text")[0].style.display="none";
            document.getElementsByClassName("titleWrapper")[0].style.display="none";
            showStatus=1;
        }
        else if(code=="go_bottom"){
            document.getElementsByClassName("text")[0].style.display="block";
            document.getElementsByClassName("titleWrapper")[0].style.display="block";
            showStatus=0;
        }
        else if(code=="go_left"){
            changePage(0);
        }
        else if(code=="go_right"){
            changePage(1);
        }

    };
    var img_onsubmit = function (code,id) {

    };
</script>
</body>
</html>